<template>
  <div class="comments" @click="oper=-1">
    <div class="comment">
      <span class="title">发表评论：</span>
      <div class="editBox">
        <div class="edit" contenteditable="true" 
        @input="inputChange" 
        @keydown="inputkeydown($event)"
        ref="edit"></div>
        <div class="edit_bottom">   
          <span>{{this.commentLength}}/140</span>
          <button :disabled="!$store.state.isLogin" @click="uploadComments">{{$store.state.isLogin ? '评论' : '请先登陆'}}</button>
        </div>
        <svg class='icon comment_ico' aria-hidden='true'>
            <use xlink:href='#icon-pinglun'></use>
        </svg>
        <div class="edit_emojiBox" @mouseenter="isEmoji = true" @mouseleave="isEmoji = false">
          <svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-biaoqing'></use>
          </svg>
          <emoji @addEmoji="addEmoji" class="edit_emoji" v-show="isEmoji"></emoji>
        </div>
      </div>
    </div>
    <div class="comment_list">
      <ul v-if="commentData.length">
        <transition-group name="comment" appear>
          <li v-for="(item,index) in result" :key="item.commentid" :data-id="item.commentid">
            <div class="comment_user">
              <img :src="item.picture" :alt="item.picture">
              <span class="name">{{item.name}}：</span>
            </div>
            <div class="comment_text">
              <span @click.stop="openOper(index,$event)" class="text" v-html="item.content"></span>
              <span class="time">{{timer(item.time)}}</span>
            </div>
            <div class="oper" :style="operPosition" v-show="oper==index">
              <p @click="reportComment(item)">
                <svg class='icon' aria-hidden='true'>
                  <use xlink:href='#icon-jubao'></use>
                </svg>
                <span>举报</span>
              </p>
              <p>
                <span>回复</span>
              </p>
            </div>
          </li>
        </transition-group>
        <li class="move" v-show="commentData.length != result.length">
          <a  @click="loadMove" href="JavaScript:;">加载更多</a>
        </li>
      </ul>
      <div class="hint" v-else>
        <svg class='icon' aria-hidden='true'>
          <use xlink:href='#icon-chaoqidai'></use>
        </svg>
        <span>暂无评论</span>
      </div>
    </div>
    <report-vue :reportObj="reportObj" @offReport="reportObj=null" v-show="reportObj"></report-vue>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import emoji from "../info/emoji.vue"
import tool from '../../assets/js/tool'
import reportVue from './report.vue'
export default {
  name: 'Topicscomments',

  data() {
    return {
      comment: '', // 输入的评论
      commentLength: 0, // 评论的长度
      isEmoji: false, // 是否显示表情图
      commentData: [], // 所有评论数据
      result: [], // 展示的评论数据
      oper: -1, // 评论区功能显示索引
      operPosition: null, // 功能菜单的定位
      reportObj: null, // 举报对象
    };
  },

  watch:{
    commentData(){
      this.oper = -1
    }
  },

  props:{
    topicsid: String
  },

  computed: {
    timer(){
      return (time) => tool.GetTimer(time)
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化
    init(){
      this.inputChange()
      this.$api.getComments({topicsid:this.topicsid}).then(res => {
        if(res instanceof Object){
          this.commentData = res.data
          this.result = this.commentData.slice(0,4)
        }
      })
    },
    // 取消回车默认事件
    inputkeydown(e){
      if (window.event && window.event.keyCode == 13) {
        e.cancelBubble=true;
        e.preventDefault();
        e.stopPropagation();
      }
    },
    // 输入框发生改变
    inputChange(){
      let edit = this.$refs.edit
      let length = edit.getElementsByTagName('img').length + edit.innerText.length
      if(length > 140){
        edit.innerHTML = this.comment
      }else{
        this.comment = edit.innerHTML
        this.commentLength = length
      }
    },
    // 添加表情
    addEmoji(img){
      let edit = this.$refs.edit
      let str = `<img src=${img} />`
      edit.innerHTML = edit.innerHTML + str
      this.inputChange()
    },
    // 发布评论
    uploadComments(){
      let edit = this.$refs.edit
      if(this.commentLength == 0 || edit.innerHTML == ''){
        this.showHint({isFlag:false,title:'不能为空'})
        return
      }
      let data = {
        topicsid: this.topicsid,
        content: edit.innerHTML
      }
      this.$api.uploadComments(data).then(res => {
        if(res == 1){
          this.showHint({isFlag:true,title:'评论成功!'})
          edit.innerHTML = ''
          this.init()
        }else if(!this.$store.state.isLogin){
          this.showHint({isFlag:false,title:'请先登陆!'})
        }else{
          this.showHint({isFlag:false,title:'系统繁忙!'})
        }
      }).catch(err => {
        alert(err)
      })
    },
    // 加载更多评论
    loadMove(){
      this.result = this.commentData.slice(0,this.result.length + 4)
    },
    // 点击评论信息定位
    openOper(i,e){
      this.operPosition = {
        top: e.layerY + 'px',
        left: e.layerX + 'px'
      }
      this.oper = i
    },
    // 举报评论
    reportComment(obj){
      this.reportObj = obj
    },
    ...mapActions(['showHint'])
  },

  components:{
    emoji,reportVue
  }
};
</script>

<style scoped>
.comments{
  width: 100%;
  border-top: 1px solid gray;
  font-size: 0.8rem;
}
.comments .comment{
  display: flex;
  align-items: center;
  padding: 20px;
}

.comment .editBox{
  flex: 1;
  height: 100px;
  border: 1px solid gray;
  position: relative;
  transition: all .3s ease;
}
.comment .editBox:focus-within{
  border: 1px solid rgb(0, 153, 255);
  box-shadow: 0 0 3px rgb(0, 153, 255);
}
.editBox .edit{
  width: 100%;
  outline: none;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 20px;
  align-content: flex-start;
  overflow-y: auto;
}
.editBox .comment_ico{
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.2rem;
}
.editBox .edit_bottom{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 5px 10px;
}
.edit_bottom button{
  padding: 6px 10px;
  background-color: green;
  color: white;
  cursor: pointer;
  border-radius: 20px;
  opacity: .8;
  transition: all .5s;
  margin-left: 20px;
  font-size: 0.7rem;
}
.edit_bottom button:hover{
  opacity: 1;
}
.edit_emojiBox .icon{
  font-size: 1.2rem;
  cursor: pointer;
  position: absolute;
  left: 4px;
  bottom: 4px;
}
.edit_emojiBox .edit_emoji{
  position: absolute;
  left: 0;
  bottom: -90px;
}
.comment_list li{
  display: flex;
  padding: 30px;
  border-top: 1px solid #ececee;
  align-items: center;
  position: relative;
}
.comment_list .comment_user{
  display: flex;
  align-items: center;
  cursor: pointer;
}
.comment_list .comment_user img{
  width: 33px;
  height: 33px;
}
.comment_list .comment_text{
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comment_text .time{
  color: gray;
  font-size: 0.7rem;
}
.comment_text .text{
  display: flex;
  align-items: center;
  cursor: pointer;
}
.comment_user .name{
  margin-left: 4px;
  font-size: 0.7rem;
  color: gray;
}
.comment_list .hint{
  text-align: center;
  padding: 20px;
}
.comment_list .hint .icon{
  font-size: 2rem;
  margin-right: 4px;
}
.comment_list .move{
  display: flex;
  justify-content: center;
  height: 100px;
}
.comment_list .move a{
  color: gray;
  transition: all .5s;
}
.comment_list .move a::before{
  display: inline-block;
  content: '';
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-top: 10px solid gray;
  border-right: 7px solid transparent;
}
.comment_list .move a:hover{
  color: rgb(0, 47, 255);
}
.comment_list .oper{
  width: 80px;
  z-index: 999;
  background-color: white;
  border: 1px solid gray;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}
.oper p{
  border-top: 1px solid #bfbfff;
  padding: 5px;
  cursor: pointer;
  transition: all .3s;
}
.oper p:hover{
  background-color: gray;
  color: white;
}
.oper p:nth-child(1){
  border: none;
}
.comment-enter{
  opacity: 0;
  margin-left: -20px;
}
.comment-enter-active{
  transition: all .3s;
}
.comment-enter-to{
  opacity: 1;
  margin-left: 0;
}
</style>